<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
    <meta charset="UTF-8">
    <title>马思特奥赛培训学校网络管理系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/demo.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/ready.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/ready.min.css}">
    <script type="text/javascript" th:src="@{/js/Vue.js}"></script>
    <!-- 引入组件库 -->
    <script type="text/javascript" th:src="@{/js/element-ui.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/element-ui.css}"/>

    <style>

        [v-cloak] {
            display: none !important;
        }
    </style>

</head>
<body>


<div class="wrapper" id="app" v-cloak>
    <!--    引入公共页面 public-index。html 的模块-->
    <div th:replace="admin/public-admin-index :: header"></div>

    <el-container style="height: 100%; border: 1px solid #eee">
        <div th:replace="admin/public-admin-index :: left"></div>


        <el-container>
            <el-main>
                <el-card class="box-card">

                    <div class="card-header">
                        <h4 class="text-center">
                            教室管理
                            <button class="btn btn-warning pull-right btn-round" @click="drawer = true"> 添加教室</button>
                        </h4>

                        <el-drawer
                                size="40%"
                                title="添加教室"
                                :visible.sync="drawer"
                                direction="btt">

                            <div style="margin: 15px;">
                                <el-input style="width: 50%" placeholder="请输入教室名字"
                                          v-model="section.sectionName"></el-input>
                                <el-select th:if="${session.ROLE=='sadmin'}" v-model="section.idInstitute" >
                                    <el-option v-for="(college,index2) in colleges" :key="index2"
                                               :label="college.instituteName"
                                               :value="college.id">
                                    </el-option>
                                </el-select>
                                <el-button icon="el-icon-circle-plus" @click="ok"></el-button>
                            </div>
                        </el-drawer>

                    </div>
                    <div class="card-body">

                        <template>
                            <el-table
                                    :data="sections"
                                    style="width: 100%">
                                <el-table-column
                                        label="教室"
                                        width="300"
                                        align="center">
                                    <template slot-scope="scope">
                                        <el-input style="width: 200px"
                                                  v-model="sections[scope.$index].sectionName"
                                                  :disabled="scope.$index!=flag"
                                                  clearable>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        th:if="${session.ROLE=='sadmin'}"
                                        label="学院"
                                        width="300"
                                        align="center">
                                    <template slot-scope="scope">
                                        <el-select v-model="sections[scope.$index].idInstitute" :disabled="scope.$index!=flag">
                                            <el-option v-for="(college,index2) in colleges" :key="index2"
                                                       :label="college.instituteName"
                                                       :value="college.id">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                        fixed="right">
                                    <template slot-scope="scope">
                                        <el-button size="small" type="danger" plain @click="del(scope.$index)">删除</el-button>
                                        <span></span>
                                        <el-button size="small" type="primary" plain v-show="scope.$index!=flag" @click="update(scope.$index)">修改</el-button>
                                        <span></span>
                                        <el-button size="small" type="primary" v-show="scope.$index==flag" @click="updateSave(scope.$index)">保存</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>

                </el-card>
            </el-main>
        </el-container>
    </el-container>
</div>


</body>

<script type="text/javascript" th:src="@{/webjars/jquery/1.9.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/Apexchart.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.js}"></script>
<script type="text/javascript" th:src="@{/asserts/js/ready.min.js}"></script>
<script th:inline="javascript">

    var basePath= /*[[${#httpServletRequest.getContextPath()}]]*/'ContextPath' ;

    var app = new Vue({
        el:"#app",
        data(){
            return {
                url:basePath+"/admin/section",
                sections:[] ,
                colleges:[],
                flag:-1,
                section:{},
                drawer: false
            }
        },
        methods:{
            myMessage(data){
                if(data.data.code==100)
                {
                    this.$notify({
                        title: '成功',
                        message: '操作成功',
                        type: 'success',
                        position: 'top-right',
                    });
                }else {
                    this.$notify({
                        title: '错误',
                        dangerouslyUseHTMLString: true,
                        message: '操作错误：<br>'+data.data.msg,
                        type:'error',
                        position: 'top-right',
                    });
                }
            },
            page(){
                axios.get(this.url+"s").then((data) => {
                    this.sections = data.data.extend.sections;
                });
            },
            ok(){
                axios.post(this.url,this.section).then((data)=>{
                    this.myMessage(data);
                    this.page();
                })
            },
            del(index){
                var section_id = this.sections[index].id;
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(this.url,{data:this.sections[index]}).then((data)=>{
                        this.myMessage(data);
                        this.page();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            update(index){
                this.flag = index;
            },
            updateSave(index){
                var section_id = this.sections[index].id;
                this.flag = -1;
                axios.put(this.url,this.sections[index]).then((data)=>{
                    this.myMessage(data);
                });
            }
        },
        mounted(){
            this.page();
            axios.get(basePath+"/sadmin/colleges").then((data) => {
                this.colleges=data.data.extend.colleges;
            });
        }
    })

</script>
</html>